<template>
    <div class="right-container" id="right-container">
        <div class="right-header">属性配置</div>
        <div class="right-body" v-if="showSetting">
            <el-form label-position="right" label-width="80px">
                <el-form-item class="settingItem" label="标题" v-if="currentComponent.hasOwnProperty('title')">
                    <el-input v-model="currentComponent.title" placeholder="标题"></el-input>
                </el-form-item>
                <el-form-item class="settingItem" label="标签" v-if="currentComponent.hasOwnProperty('label')">
                    <el-input v-model="currentComponent.label" placeholder="标签"></el-input>
                </el-form-item>
                <el-form-item class="settingItem" label="placeholder" v-if="currentComponent.hasOwnProperty('placeholder')">
                    <el-input v-model="currentComponent.placeholder" placeholder="placeholder"></el-input>
                </el-form-item>
                <el-form-item class="settingItem" label="行数" v-if="currentComponent.hasOwnProperty('rows')">
                    <el-input-number v-model="currentComponent.rows" :min="1" :max="10"></el-input-number>
                </el-form-item>
                <el-form-item class="settingItem" label="KEY" v-if="currentComponent.hasOwnProperty('key')">
                    <el-input v-model="currentComponent.key" placeholder="KEY"></el-input>
                </el-form-item>
                <el-form-item class="settingItem" label="最小值" v-if="currentComponent.hasOwnProperty('min')">
                    <el-input-number v-model="currentComponent.min" :min="1" :max="50"></el-input-number>
                </el-form-item>
                <el-form-item class="settingItem" label="最大值" v-if="currentComponent.hasOwnProperty('max')">
                    <el-input-number v-model="currentComponent.max" :min="1" :max="1000"></el-input-number>
                </el-form-item>
                <el-form-item class="settingItem" label="步长" v-if="currentComponent.hasOwnProperty('step')">
                    <el-input-number v-model="currentComponent.step" :min="1" :max="100"></el-input-number>
                </el-form-item>
                <el-form-item class="settingItem" label="间断点" v-if="currentComponent.hasOwnProperty('showStops')">
                    <el-switch
                            v-model="currentComponent.showStops">
                    </el-switch>
                </el-form-item>
                <el-form-item class="settingItem" label="输入框" v-if="currentComponent.hasOwnProperty('showInput')">
                    <el-switch
                            v-model="currentComponent.showInput">
                    </el-switch>
                </el-form-item>
                <el-form-item class="settingItem" label="显示类型" v-if="currentComponent.hasOwnProperty('dateType')">
                    <el-select
                            v-model="currentComponent.dateType"
                            placeholder="显示类型">
                        <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item class="settingItem" label="开始占位" v-if="currentComponent.hasOwnProperty('startPlaceholder')">
                    <el-input v-model="currentComponent.startPlaceholder" placeholder="开始占位"></el-input>
                </el-form-item>
                <el-form-item class="settingItem" label="结束占位" v-if="currentComponent.hasOwnProperty('endPlaceholder')">
                    <el-input v-model="currentComponent.endPlaceholder" placeholder="结束占位"></el-input>
                </el-form-item>
                <el-form-item class="settingItem" label="分隔符" v-if="currentComponent.hasOwnProperty('separator')">
                    <el-input v-model="currentComponent.separator" placeholder="分隔符"></el-input>
                </el-form-item>
                <el-form-item class="settingItem" label="显示格式" v-if="currentComponent.hasOwnProperty('format')">
                    <el-input v-model="currentComponent.format" placeholder="显示格式"></el-input>
                </el-form-item>
                <el-form-item class="settingItem" label="范围选择" v-if="currentComponent.hasOwnProperty('isRange')">
                    <el-switch
                            v-model="currentComponent.isRange">
                    </el-switch>
                </el-form-item>
                <el-form-item class="settingItem" label="必填" v-if="currentComponent.hasOwnProperty('require')">
                    <el-switch
                            v-model="currentComponent.require">
                    </el-switch>
                </el-form-item>
                <div class="option-container" v-if="currentComponent.type!=='group'&&currentComponent.hasOwnProperty('child')">
                    <el-divider content-position="center">选项</el-divider>
                    <div class="option-item" v-for="(item,index) in currentComponent.child" :key="index">
                        <el-input placeholder="选项名" v-model="item.label"></el-input>
                        <el-input placeholder="选项值" v-model="item.value"></el-input>
                        <i class="el-icon-remove-outline" @click="handleDelete(index)"></i>
                    </div>
                    <div class="option-add" @click="handleAdd()">
                        <i class="el-icon-circle-plus-outline"></i>
                        <span>添加选项</span>
                    </div>
                </div>
            </el-form>
        </div>
    </div>
</template>

<script>
    import Vue from 'vue';
    import {Input, Form, FormItem, Switch, Divider} from 'element-ui';

    Vue.use(Form);
    Vue.use(FormItem);
    Vue.use(Input);
    Vue.use(Switch);
    Vue.use(Divider);

    export default {
        name: 'Right',
        data() {
            return {
                options: [
                    {
                        label: 'year',
                        value: 'year'
                    },
                    {
                        label: 'month',
                        value: 'month'
                    },
                    {
                        label: 'date',
                        value: 'date'
                    },
                    {
                        label: 'dates',
                        value: 'dates'
                    },
                    {
                        label: 'week',
                        value: 'week'
                    },
                    {
                        label: 'datetime',
                        value: 'datetime'
                    },
                    {
                        label: 'datetimerange',
                        value: 'datetimerange'
                    },
                    {
                        label: 'daterange',
                        value: 'daterange'
                    },
                    {
                        label: 'monthrange',
                        value: 'monthrange'
                    }
                ]
            }
        },
        props: {
            showSetting: {
                type: Boolean,
                default: () => {
                    return false
                }
            },
            currentComponent: {
                type: Object,
                default: () => {
                    return {}
                }
            }
        },
        methods: {
            /**
             * 删除选项
             * @param index
             */
            handleDelete(index) {
                console.log(index);
                const child = this.currentComponent.child;
                child.splice(index, 1);
            },
            /**
             * 添加选项
             */
            handleAdd() {
                const child = this.currentComponent.child;
                child.push({label: 'label', value: 'value'});
            }
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
    @import "right";
</style>
